<template>
	<view v-if="hide">
		<view class="content floating" :class="{ 'hide': isHide }">
			<view class="content-box">
				<image src="../../static/schedule.png" mode=""></image>
				<view class="content-texts">
					<!-- {{texts}} -->
					{{integral}}积分
				</view>
				<view class="content-text" v-if="!texts">
					浏览 <text>{{ countdown }}</text>秒领取
				</view>
				<view class="content-text" v-if="texts">
					{{texts}}
				</view>
				<view class="content-bar">
					<view class="container">
						<view class="progress-bar">
							<view class="progress"
								:style="{ width: progress + '%', transitionDuration: duration + 's' }"></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="" v-if="texts">
				{{texts}}
			</view> -->
	</view>
	<!-- <view class="toggle">
			{{ isHide ? '展开' : '收起' }}
		</view> -->
	</view>
</template>

<script>
	import * as UserApi from '@/api/user'
	import store from '@/store'
	export default {
		name: "frame-hide",
		data() {
			return {
				countdown: 15, // 初始倒计时时间
				timer: null, // 定时器对象
				isHide: false, // 控制视图的显示与隐藏
				hide: false,
				texts: '',
				id: '',
				progress: 1,
				duration: 0.5, // 动画过渡时间
				integral: 5,
			};
		},
		created() {
		

		},
	activated(){
		console.log("触发")
	},
	onLoad(options) {
	  // 当前页面参数
	  console.log(123)
	},
		mounted() {
		

			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面路由
			const currentPage = pages[pages.length - 1];
			const currentRoute = currentPage.route;
			// store.state.need_second = 60;
			this.countdown  = store.state.need_second || 15;
			let str = store.state.need_second || 15
			// 模拟进度增加的过程
			
			console.log(store.state.task_index == 0, "23434343");
			if (store.state.task_id && (store.state.task_index === 0) && currentRoute == 'pages/indexs/index') {
				this.integral = store.state.point || 5;
				this.hide = true
				this.startCountdown(store.state.task_id);
				// setInterval(() => {
				// 	if (this.progress < 100) {
						
				// 		this.progress =(str- this.countdown)/str*100; // 每次增加10%
				// 	}
				// }, 1000);
			}
			console.log(store.state.task_index == 0);
			if (store.state.task_id && (store.state.task_index === 1) && currentRoute == 'pages/goods/detail') {
				this.integral = store.state.point || 1;
				this.hide = true
				this.startCountdown(store.state.task_id);
				// setInterval(() => {
				// 	if (this.progress < 100) {
				// 		this.progress =(str- this.countdown)/str*100; // 每次增加10%
				// 	}
				// }, 1000);
			}

		},
		methods: {
			startCountdown(id) {
				clearInterval(this.timer);
				this.id = id;
				// this.countdown = 15;
				if (this.texts) {
					// this.isHide = false;

					return
				}
				this.hide = true;
				let str = store.state.need_second || 15
				// this.isHide = true;
				this.timer = setInterval(() => {
					// 获取当前页面栈
					const pages = getCurrentPages();
					// 获取当前页面路由
					const currentPage = pages[pages.length - 1];
					const currentRoute = currentPage.route;
					console.log(currentRoute,'currentRoute')
						if (this.progress < 100) {
							this.progress =(str- this.countdown)/str*100; // 每次增加10%
						}
					if (this.countdown > 0) {
						
						this.countdown--;
					} else {
						clearInterval(this.timer);
						UserApi.completeTask({
							task_id: id
						}).then(res => {
							this.texts = res.message;
							setTimeout(() => {
								// this.getData()
								this.id = '';
								this.isHide = true;
								this.hide = false;
								store.state.task_id = 0;
								store.state.task_index = 0;
							}, 1000)


						}).catch(err => {
							console.log(err, "|err")
						})
						// 倒计时结束后的操作
					}
				}, 1000);
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		top: 870rpx;
		right: 0rpx;

		.content-box {
			position: relative;

			>image {
				width: 160rpx;
				height: 160rpx;
			}

			.content-texts {
				position: absolute;
				top: 20rpx;
				left: 54rpx;
				font-size: 24rpx;
				color: red;
				font-weight: 600;
			}

			.content-text {
				position: absolute;
				color: #fff;
				top: 104rpx;
				left: 16rpx;
				font-size: 20rpx;

				>text {
					font-weight: 600;
					color: #FBB483;
				}
			}
		}


	}

	.content-bar {
		position: absolute;
		top: 136rpx;
		left: 14rpx;
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.progress-bar {
		width: 136rpx;
		height: 14rpx;
		background-color: #EC4218;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.progress {
		height: 100%;
		background-color: #FFBD8B;
		transition: width;
		transition-timing-function: linear;
	}
</style>